<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { isWeChatWeb } from "@/utils/index";

interface Props {
  bgColor?: string;
  title?: string;
  hideTitle?: boolean;
  isScrolled?: boolean;
}
// const { bgColor = 'transparent', title, hideTitle, isScrolled } = defineProps<Props>();
const props = withDefaults(defineProps<Props>(), {
  bgColor: 'transparent'
})

const leftIcon = ref('');

// 根据滚动状态和 hideTitle 属性，动态计算导航栏标题
const navbarTitle = computed(() => {
  // 如果处于非滚动状态且 hideTitle 为 true，则标题为空
  if (!props.isScrolled && props.hideTitle) {
    return '';
  }
  // 否则返回传入的 title
  return props.title;
});

// 根据滚动状态和 bgColor 属性，动态计算导航栏背景
const navbarBgColor = computed(() => {
  // 如果处于滚动状态且背景默认透明，将背景设置为白色
  if (props.bgColor == 'transparent' && props.isScrolled) {
    return '#FFFFFF';
  } else {
    return props.bgColor;
  } 
});

onMounted(()=>{
  if(getCurrentPages().length > 1) leftIcon.value = 'arrow-left';
});
</script>

<template>
  <view class="sticky top-0 z-50" :class="{ 'bg-white': props.isScrolled }" v-if="!isWeChatWeb()">
    <uv-navbar :bgColor="navbarBgColor" :title="navbarTitle" :leftIcon="leftIcon" placeholder autoBack></uv-navbar>
  </view>
</template>
